window.onload = function () {
    // 鼠标滑过在线直播的导航栏时的事件
    $(".one>li:not('.all')").hover(function () {
        $(this).css("color", "#FF5D23");
        console.log(1)
    }, function () {
        $(this).css("color", "#666666");
    })

    // 鼠标滑过全部时的事件
    $(".all").hover(function () {
        $(".three").css("display", "block");
    }, function () {
        $(".three").css("display", "none");
    })

    // 点击下拉出现没显示完的列表
    $(".xia").click(function () {
        $(".two").css("display", "block");
        $(".Content").css("margin-top", "80px");
        $(".online").children(".tetx").css("height", "110px");
    })


    // 滑动到一定高度时在线在直播的导航栏固定在在顶端
    $(window).scroll(function () {
        // 头部固定
        if ($(window).scrollTop() > 1) {
            $(".head").addClass("Head");
        } else {
            $(".head").removeClass("Head");
        }

        // 直播导航栏固定固定
        if ($(window).scrollTop() > $(".online").offset().top - $(".head").height()) {
            $(".online").children(".text").addClass("Text");
        } else {
            $(".online").children(".text").removeClass("Text");
        }
    })
    var i = 0;          // 记录点击的次数
    // 点击换一换，切换内容
    $(".change").click(function () {
        console.log(1)
        i++;
        i = i % 4;
        console.log(i);
        if (i == 5) {
            i == 0;
        }
        // i = i % 3;
        // $(".tuijian").animate({ "top": -260 * i + "px" }, 800);
        $(".tuijian").css("top", -270 * i + "px").fadeIn(50)
    })

    // jQuery的ajax
    // 斗鱼推荐
    var t = $.ajax({
        type: "get",
        url: "directry.json",
        async: false,
        success: function (response, status, xhr) {
            // console.log(response);
            // obj1 = obj
        },
        // 失败的回调函数
        error: function () {
            console.log(1);
        }
    })
    // 斗鱼推荐
    $.each(t.responseJSON.directory.tuiian, function (i, e) {
        
 
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>').appendTo(".tuijian");
    }) 
    // 斗鱼推荐的视频区滑动的时候会放大一倍
    $(".tuijian>li").hover(function (e) {
        // 放大效果
        $(this).addClass("big");
        // 头像
        $(this).children(".logo").css("display", "block");
        // 没滑动时的系统头像
        $(this).children(".hide").children(".touxiang").css("display", "none");
        // 作者
        $(this).children(".hide").children("span").css({ "top": "-40px" }, { "left": "80px" });
        // 观看人数
        $(this).children(".three").addClass("t");
        // 关注
        $(this).children(".guanzhu").css("display", "block");
    }, function () {
        $(this).removeClass("big");
        $(this).children(".logo").css("display", "none");
        $(this).children(".hide").children(".touxiang").css("display", "block");
        $(this).children(".hide").children("span").css({ "top": "0px" }, { "left": "30px" });
        $(this).children(".three").removeClass("t");
        $(this).children(".guanzhu").css("display", "none");
    })


    // 在线直播
    $.each(t.responseJSON.directory.zhibo, function (i, e) {
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>' + '<p class="miaosu">' + e.miaosu + '</p>').appendTo(".Content>ul");
    })
    // 主页分页
    $.each(t.responseJSON.change.zhibo_page, function (i, e) {
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>' + '<p class="miaosu">' + e.miaosu + '</p>').appendTo(".Content1>ul");
    })
    // 当点击下一页时，第一页的内容消失
    $(".next").click(function () {
        console.log("asdfdsf")
        $(".Content").css("display", "none");
        $(".Content1").css("display", "block");
        $(this).css("color", "#BFBFBF");
        $(".prev").css("color", "black")
        $(".prev").next().css("border", "1px white");
        $(this).prev().css("border", "1px solid #FF5D23")
    })
    // 当点击数字2时，效果跟下一页的效果一样
    $(".next").prev().click(function () {
        console.log("asdfdsf")
        $(".Content").css("display", "none");
        $(".Content1").css("display", "block");
        $(".next").css("color", "#BFBFBF");
        $(".prev").css("color", "black")
        $(".prev").next().css("border", "1px white");
        $(this).css("border", "1px solid #FF5D23")
    })
    // 当点击上一页时，返回上一页的内容
    $(".prev").click(function () {
        $(".Content1").css("display", "none");
        $(".Content").css("display", "block");
        $(this).css("color", "#BFBFBF");
        $(".next").css("color", "black")
        $(".next").prev().css("border", "1px white");
        $(this).next().css("border", "1px solid #FF5D23")
    })
    // 当点击数字1时，效果和上一页的效果一样
    $(".prev").next().click(function () {
        $(".Content1").css("display", "none");
        $(".Content").css("display", "block");
        $(".prev").css("color", "#BFBFBF");
        $(".next").css("color", "black")
        $(".next").prev().css("border", "1px white");
        $(this).css("border", "1px solid #FF5D23")
    })
    // 全部视频区滑动的时候会放大一倍
    $(".Content>ul>li").hover(function (e) {
        // 放大效果
        $(this).addClass("big");
        // 头像
        $(this).children(".logo").css("display", "block");
        // 没滑动时的系统头像
        $(this).children(".hide").children(".touxiang").css("display", "none");
        // 作者
        $(this).children(".hide").children("span").css({ "top": "-40px" }, { "left": "80px" });
        // 观看人数
        $(this).children(".three").addClass("tt");
        // 关注
        $(this).children(".guanzhu").css("display", "block");
    }, function () {
        $(this).removeClass("big");
        $(this).children(".logo").css("display", "none");
        $(this).children(".hide").children(".touxiang").css("display", "block");
        $(this).children(".hide").children("span").css({ "top": "0px" }, { "left": "30px" });
        $(this).children(".three").removeClass("tt");
        $(this).children(".guanzhu").css("display", "none");
    })


    // 网游竞技
    $.each(t.responseJSON.directory.wangy, function (i, e) {
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>').appendTo(".Wang>ul");
    })
    // 网游竞技分页
    $.each(t.responseJSON.change.wangy_page, function (i, e) {
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>').appendTo(".WangY>ul");
    })
    // 网游竞技板块，点击该板块时显示对应板块的内容
    $(".wangyou").click(function () {
        index1 = $(this).index;
        $(this).css({ "background": "#FF5D23" ,  "color": "white" });
        // 对应的网游竞技板块出现，其他的消失
        $(".Wang").css("display", "block");
        $(".Content").css("display", "none");
        $(".all").css("color", "#666");
        $(".all").css("background", "white");
        $(".wangyou").next().css("background", "white");
        // 下一页
        $(".next").click(function () {
            $(".Wang").css("display", "none");
            $(".WangY").css("display", "block");
            $(".Content1").css("display", "none");
        })
        // 点中数字2
        $(".next").prev().click(function () {
            $(".Wang").css("display", "none");
            $(".WangY").css("display", "block");
            $(".Content1").css("display", "none");
        })
        // 上一页
        $(".prev").click(function () {
            $(".WangY").css("display", "none");
            $(".Wang").css("display", "block");
            $(".Content1").css("display", "none");
            $(".Content").css("display", "none");
        })
        // 数字1
        $(".prev").next().click(function () {
            $(".WangY").css("display", "none");
            $(".Wang").css("display", "block");
            $(".Content1").css("display", "none");
            $(".Content").css("display", "none");
        })
    })
    // 网游竞技板块视频区放大一倍
    $(".Wang>ul>li").hover(function (e) {
        // 放大效果
        $(this).addClass("big");
        // 头像
        $(this).children(".logo").css("display", "block");
        // 没滑动时的系统头像
        $(this).children(".hide").children(".touxiang").css("display", "none");
        // 作者
        $(this).children(".hide").children("span").css({ "top": "-40px" }, { "left": "80px" });
        // 观看人数
        $(this).children(".three").addClass("tt");
        // 关注
        $(this).children(".guanzhu").css("display", "block");
    }, function () {
        $(this).removeClass("big");
        $(this).children(".logo").css("display", "none");
        $(this).children(".hide").children(".touxiang").css("display", "block");
        $(this).children(".hide").children("span").css({ "top": "0px" }, { "left": "30px" });
        $(this).children(".three").removeClass("tt");
        $(this).children(".guanzhu").css("display", "none");
    })


    // 单击热游
    $.each(t.responseJSON.directory.danj, function (i, e) {
        $("<li></li>").html('<img src="' + e.src + '"><div class="one"><span class="left">' + e.title + '</span><span class="right">' + e.gan + '</span></div>' + '<img src="' + e.logo + '" class="logo"></img>' + '<div class="hide"><img src="' + e.touxiang + '" class="touxiang"><span>' + e.autor + '</span></div><div class="three"><img src="' + e.hott + '" class="hot"><span>' + e.hot + '</span></div>' + '<div class="guanzhu">' + e.guanzhu + '</div>').appendTo(".Danji>ul");
    })
    // 单击热游板块，点击该板块时显示对应板块的内容
    $(".danji").click(function () {
        index2 = $(this).index;
        $(this).css({ "background": "#FF5D23" ,  "color": "white" });
        // 对应的网游竞技板块出现，其他的消失
        $(".Danji").css("display", "block");
        $(".Wang").css("display", "none");
        $(".Content").css("display", "none");
        $(".all").css("color", "#666");
        $(".all").css("background", "white");
        $(".all").next().css("background", "white");
    })
    // 单击热游
    $(".Danji>ul>li").hover(function (e) {
        // 放大效果
        $(this).addClass("big");
        // 头像
        $(this).children(".logo").css("display", "block");
        // 没滑动时的系统头像
        $(this).children(".hide").children(".touxiang").css("display", "none");
        // 作者
        $(this).children(".hide").children("span").css({ "top": "-40px" }, { "left": "80px" });
        // 观看人数
        $(this).children(".three").addClass("tt");
        // 关注
        $(this).children(".guanzhu").css("display", "block");
    }, function () {
        $(this).removeClass("big");
        $(this).children(".logo").css("display", "none");
        $(this).children(".hide").children(".touxiang").css("display", "block");
        $(this).children(".hide").children("span").css({ "top": "0px" }, { "left": "30px" });
        $(this).children(".three").removeClass("tt");
        $(this).children(".guanzhu").css("display", "none");
    })



    // 当点击侧边栏的按钮时侧边栏的宽度变大
    $(".container>.right").click(function () {
        // 侧边栏宽度变大
        $(".nav").css("width", "240px");
        // li内容重新排列
        $(".nav").children(".old").css("display", "none");
        $(".nav").children(".new").css("display", "block");
        // 相应的斗鱼推荐也要往右移
        $(".selection").css("margin-left", "185px");
        // 相应的直播也要往右移
        $(".online").css("margin-left", "185px");
    })


    // 鼠标滑过下拉的列表时变换样式
    // var index1, index2, num;
    // $(".two>li").hover(function () {
    //     num = $(this).index;
    //     if (num != index1 && num != index2) {
    //         $(this).css("color", "#FF5D23");
    //     } else {
    //         $(this).css("color", "#666666");
    //     }
    // }, function () {
    //     $(this).css("color", "#666666");
    // })


    // 点击默认时，跳转到全部的页面
    $(".moren").click(function () {
        $(this).css("background", "#FF5D23");
        $(".Conetent").css("display", "block");
        $("Wang").css("display", "none");
    })

    // 头部iframe标签
    // console.log($('.header_games').offset().top);
}


